<script setup lang="ts">
import { onBeforeMount, onMounted, ref, watch } from 'vue'
import { RouterView, RouterLink, useRouter, useRoute } from 'vue-router'
import { NIcon, NButton, NLayout, NLayoutHeader, NLayoutContent, NLayoutFooter } from 'naive-ui'
import { Home, PersonCircleSharp, PeopleOutline, MenuOutline } from '@vicons/ionicons5'
import { AddressBookRegular, QuestionCircleRegular } from '@vicons/fa'
import VideoRequest from '@/components/VideoRequest.vue'
const router = useRouter()
const route = useRoute()
const currentPageName = ref('')

const setPageName = () => {
  switch (route.path) {
    case '/home':
      currentPageName.value = '会话框'
      break
    case '/list':
      currentPageName.value = '通讯录'
      break
    case '/mine':
      currentPageName.value = '我的'
      break
    case '/setting':
      currentPageName.value = '设置'
      break
    default:
      break
  }
}
onMounted(() => {
  setPageName()
  window.onresize = () => {
    getMainHeight()
  }
})

watch(route, () => {
  setPageName()
})
onBeforeMount(() => {
  getMainHeight()
})
const mainHeight = ref('90vh')
const getMainHeight = () => {
  mainHeight.value = window.innerHeight - 100 + 'px'
}
</script>

<template>
  <VideoRequest/>
  <NLayout class="page-wrapper">
    <NLayoutHeader class="header">
      <n-button text>
        <n-icon size="20">
          <MenuOutline />
        </n-icon>
      </n-button>
      <p>{{ currentPageName }}</p>
      <n-button text>
        <n-icon size="20">
          <QuestionCircleRegular />
        </n-icon>
      </n-button>
    </NLayoutHeader>
    <NLayoutContent :content-style="{ padding: 0 }" class="main" :style="{ height: mainHeight }">
      <RouterView />
    </NLayoutContent>
    <NLayoutFooter class="footer">
      <RouterLink to="/home">
        <n-button text>
          <n-icon size="20">
            <Home />
          </n-icon>
        </n-button>
      </RouterLink>
      <RouterLink to="/list">
        <n-button text>
          <n-icon size="20">
            <AddressBookRegular />
          </n-icon>
        </n-button>
      </RouterLink>
      <RouterLink to="/mine">
        <n-button text>
          <n-icon size="20">
            <PersonCircleSharp />
          </n-icon>
        </n-button>
      </RouterLink>
    </NLayoutFooter>
  </NLayout>
</template>

<style scoped>
.page-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.page-wrapper .header {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.page-wrapper .header p {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  line-height: 50px;
  
}
.page-wrapper .main {
  height: 90%;
  min-height: 500px;
  width: 100%;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0%;
  margin: 0;
}

.page-wrapper .footer {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.page-wrapper .footer a {
  display: block;
  width: 30%;
  text-align: center;
  transition: all 0.15s;
}

.page-wrapper .footer a.router-link-exact-active {
  font-weight: bold;
  color: #00bd7e;
}
</style>
